<template>
    <div class="personalBox settle-sub-box">
        <div class="avatarBox">
            <div class="img">
                <el-image v-if="detail.avatar"
                          fit="contain"
                          :src="detail.avatar ? ('/_api' + detail.avatar): '/static/images/doctor.png'">
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <img src="/static/images/doctor.png" class="el-image" fit="contain" v-else>
            </div>
            <div class="name">{{detail.name}}</div>
            <div>{{detail.dept}} 哈尔滨市第五医院</div>
            <div class="price" v-if="detail.price || detail.price == 0">
                <span>挂号费:</span>
                <span class="priceD">￥{{detail.price.toFixed(2)}}</span>
            </div>
        </div>
        <div class="schedulingInfo">
            <div class="infoTitle">
                <div class="doctorRep" @click="showDoctorRep" v-if="detail.doctorRep">替诊医生<i
                    class="el-icon-arrow-right"></i></div>
                排班信息 {{detail.date}}
            </div>
            <div v-for="(item,index) in detail.scheduleDays" :key="index" class="clearfix list">
                <div class="rightBox">
                    <el-button type="primary" size="small" @click="showItem(item)"
                               v-if="item.rest>0&&canAppointment(item)">
                        预约
                    </el-button>
                    <el-button type="primary" size="small disable" v-else-if="item.rest<1&&canAppointment(item)">约满
                    </el-button>
                    <el-button type="primary" size="small disable"
                               v-else>
                        不可预约
                    </el-button>
                    <!--                    <el-button type="primary" size="small disable" v-else>停诊</el-button>-->
                </div>
                <div class="leftBox">
                    <div>{{item.dayStr}} {{item.visitTime}}</div>
                    <div>剩余号数 {{item.rest}}</div>
                </div>
            </div>
        </div>
        <div class="introduction">
            <div class="introTitle clearfix">
                <div>医生简介</div>
                <div @click="switchMethods">
                    {{introduction ? '收起' : '展开'}}<i
                    :class="introduction ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
            </div>
            <div class="text" v-if="introduction">
                {{detail.introduction}}
                <div class="empty" v-if="!detail.introduction">该医生暂无简介</div>
            </div>
        </div>
        <!--        <transition name="slide">-->
        <!--            <router-view></router-view>-->
        <!--        </transition>-->
        <confirm v-model="showConfirm" confirm-text="确认" cancel-text="取消"
                 class="confirm" @on-confirm="submit()" :close-on-confirm="false" title="预约确定">
            <div class="prompt" v-if="currentItem">
                <div>{{detail.dept + ' ' + detail.name}}</div>
                <div>{{detail.date + ' ' + currentItem.dayStr + ' ' + currentItem.visitTime}}</div>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {PopupPicker, Group, Confirm, Popup} from 'vux'

    export default {
        data() {
            return {
                appointList: [],
                introduction: false,
                showFlag: false,
                detail: {},
                doctorId: '',
                dept: '',
                date: '',
                showConfirm: false,
                currentItem: null,
                doctorRepShow: false,
                show: false
            }
        },
        mounted() {
            if (this.$route.query.dept) this.dept = this.$route.query.dept
            if (this.$route.query.date) this.date = this.$route.query.date
            if (this.$route.query.id) this.doctorId = this.$route.query.id
            this.getDetail()
        },
        methods: {
            switchMethods() {
                this.introduction = !this.introduction
            },
            canAppointment(item, type) {
                if (this.detail) {
                    if ((this.detail.suspendService === 1 || (this.detail.suspendService === 4 && this.detail.doctorRep))) {
                        return true
                    }
                }
            },
            getDetail() {
                this.$http.get('/doctor/appointment/expertScheduleDetail', {
                    date: this.date,
                    dept: this.dept,
                    doctorId: this.doctorId
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            },
            showItem(item) {
                this.currentItem = item
                this.showConfirm = true
            },
            submit() {
                let _this = this
                this.showConfirm = false
                this.$http.post('/doctor/appointment/apply?noAlert=true', {
                    expertsScheduleDailyId: this.currentItem.expertsScheduleDailyId,
                    userPatientId: Number(this.$route.query.userPatientId) || null
                }).then(result => {
                    if (result.success) {
                        this.$router.push({
                            path: '/appointment-success',
                            query: {
                                dept: this.detail.dept,
                                date: this.detail.date,
                                name: this.detail.name,
                                str: this.currentItem.dayStr,
                                time: this.currentItem.visitTime
                            }
                        })
                        _this.currentItem = null
                    } else {
                        this.$vux.alert.show({
                            content: result.message
                        })
                    }
                })
            },
            showDoctorRep() {
                this.$router.push({
                    path: '/replace-doctor',
                    query: {
                        dept: this.dept,
                        date: this.date,
                        id: this.doctorId
                    }
                })
            }
        },
        components: {
            PopupPicker,
            Group,
            Confirm,
            Popup
        },
        beforeRouteLeave(to, from, next) {
            let _this = this
            if (_this.doctorRepShow) {
                _this.doctorRepShow = false
                next(false)
            } else {
                next()
            }
        }
    }
</script>

<style scoped lang="less">
    .personalBox {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;

        .avatarBox {
            width: 100%;
            height: 4rem;
            padding-top: .4rem;
            /*background-color: rgb(132, 210, 247);*/
            background: url('../../static/images/bg.png') no-repeat center;
            background-size: cover;

            div {
                text-align: center;
                color: #fff;
            }

            .name {
                margin: .2rem 0;
                font-size: .32rem;
            }
            
            .price {
                color: #FEFF8F;
            }

            .priceD {
                font-weight: bold;
            }

            .img {
                width: 1.5rem;
                height: 1.5rem;
                margin: 0 auto;
                background-color: #eee;
                border-radius: 50%;
                overflow: hidden;

                .el-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .schedulingInfo {
            width: 100%;
            min-height: 2.4rem;
            /*padding: .3rem .2rem;*/
            margin-bottom: .2rem;
            background-color: #fff;
            padding-top: .3rem;

            .infoTitle {
                font-weight: 700;
                margin-bottom: .2rem;
                padding: 0 .2rem;

                .doctorRep {
                    float: right;
                    color: #999;
                    font-weight: normal;
                }
            }

            .list {
                border-bottom: 1px solid #eee;
                padding: .1rem .2rem;
            }

            .leftBox {
                /*float: left;*/
                line-height: .48rem;

                div {

                    &:nth-child(1) {
                        /*margin: .1rem 0;*/
                    }

                    &:nth-child(2) {
                        color: #999;
                        font-size: .24rem;
                    }
                }
            }

            .rightBox {
                float: right;
                height: .6rem;
                margin-top: .18rem;

                .el-button {
                    padding: .15rem .25rem;
                    font-size: .24rem;
                    border-radius: .05rem;
                }

                .disable {
                    background-color: #ccc;
                    border-color: #ccc;
                }

                &.full {
                    background-color: #FFB566;
                }
            }
        }

        .introduction {
            width: 100%;
            padding: .3rem .2rem;
            background-color: #fff;

            .introTitle {

                div {

                    &:nth-child(1) {
                        float: left;
                    }

                    &:nth-child(2) {
                        float: right;
                        color: #4f86ec;

                        i {
                            margin-left: .1rem;
                        }
                    }
                }
            }

            .text {
                margin-top: .2rem;

                .empty {
                    text-align: center;
                    color: #999;
                    margin-top: .4rem;
                }
            }
        }

        /deep/ .confirm {
            .prompt {
                margin: .3rem 0;
                text-align: left;

            }
        }
    }
</style>
